<template>
  <div class="departments">
    <el-card>
      <template #header>
        <div>组织架构</div>
      </template>
      <div>
        <Item :item="topInfo" />
        <hr>
        <!-- 树形控件 -->
        <el-tree :data="treeData" :props="{ lable: 'name' }">
          <template
            v-slot="{ data }"
          ><Item
            :item="data"
            @getDepartment="getDepartment"
          /></template>
        </el-tree>
      </div>
    </el-card>
    <Add :init-data="initData" @getDepartment="getDepartment" />
  </div>
</template>

<script>
import Item from './components/item.vue'
import Add from './components/add.vue'
import { companyDepartment } from '@/api/department.js'
export default {
  name: '',
  components: {
    Item,
    Add
  },
  data() {
    return {
      treeData: [],
      initData: [], // 未做树状处理的原始数据
      topInfo: {
        name: '传智',
        manager: '负责人',
        top: true, // 顶部数据
        id: ''
      }
    }
  },
  computed: {},
  created() {
    this.getDepartment()
  },
  methods: {
    async getDepartment() {
      const res = await companyDepartment()
      console.log(res)
      this.treeData = this.changeData(res.data.depts, '')
      this.initData = res.data.depts
      this.topInfo.name = res.data.companyName
    },
    changeData(arr, str = '') {
      return arr.filter((item) => {
        if (item.pid === str) {
          item.children = this.changeData(arr, item.id)
          return true
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.departments {
  padding: 15px;
}
</style>
